Part 1 of 3 Basic example web app with Glassfish, NetBeans 6.0, JSF and EJB3

Keywords: DAO, MVC, JSF, Session Facade, NetBeans 6.0, EJB3, GlassfishV2

If you’re looking for a walkthrough on setting up a basic web application using the DAO / MVC patterns with Glassfish V2 you’ve come to the right place. Here’s a HOWTO.

Upfront software requirements:

• Sun’s JDK 1.6 (download: http://java.sun.com/javase/downloads/index.jsp)
• PostgreSQL 8.2 (download: http://postgresql.org/download/)
• NetBeans IDE 6.0 Web & Java EE bundle (download: http://download.netbeans.org/netbeans/6.0/final/)

(If anyone wants this HOWTO/tutorial to be extended with instructions for MySQL post me a comment, if anyone wants a HOWTO on how to set up your environment post me a comment, if you get stuck at any certain point post me a comment…)

Please note that what you’ll find here are the bare essentials to give you a jumpstart. In the real world (and in later examples if this works out fine) Java goodies such as Seam and Facelets are added to make the steps below much simpler and much more attractive. Next to that, this example uses a simple datamodel with one domain element only (User). In a next step we might add more elements.

Table of contents

• Step 1: Create an Enterprise Application Project with NetBeans 6
  
• Step 2: Add JSF capabilities to your project
• Step 3: Running the newly created project
• Step 4: Create the test_db database (on PostgreSQL)
• Step 5: Add the JDBC driver file to Glassfish
• Step 6: Set up a JDBC connection pool in Glassfish
• Step 7: Create the User Entity Bean
• Step 8: Add business logic
• Step 9: Create the web application’s Controller
• Step 10: Configure page flow in faces-config.xml
• Step 11: Create views

The example consists of two web pages, one enlisting all the users stored in the database, the other contains a form for adding a user.

Step 1: Create an Enterprise Application Project with NetBeans 6

1. Start NetBeans
2. Select Menubar item File > New Project …
3. Select category Enterprise > project Enterprise Application
4. Click Next
5. Fill in Project Name JumpStartEjbJsf
6. Click Finish

Step 2: Add JSF capabilities to your project

For now our web application only supports JSP. Let’s add JSF to the mix.

1. Right-click the JumpStartEjbJsf-war created in Step 1 and select Properties.
2. In the Project Properties dialog box select Frameworks.
3. Click on Add.
4. Select JavaServer Faces.
5. Click OK.

If you’ve kept the default settings, when deployed JSF pages will be preceeded by /faces/. Therefore we have tell the container that index.jsp no longer is the start page but that faces/index.jsp is.

1. In the Projects pane traverse through the tree to JumpStartEjbJsf-war > Configuration Files and open web.xml.
2. Click on the Pages button in web.xml and change the value for Welcome Files to faces/index.jsp.
3. Back in the Projects pane delete the file index.jsp
4. Rename the file welcomeJSF.jsp to index.jsp

Step 3: Running the newly created project

Let’s check whether it is working. Press F6 to boot Glassfish, deploy the application and start up a browser window.

Step 4: Create the test_db database (on PostgreSQL)

Create a database using PgAdmin3 or by issuing the commands:

> sudo psql -U postgres
# CREATE DATABASE test_db WITH ENCODING=’UTF8′;
# \q


Create a table in our newly created test_db database by issuing the commands:

> sudo psql -U postgres -d test_db
# CREATE TABLE users
# (
# user_id serial,
# username varchar(255) NOT NULL,
# first_name varchar(255),
# last_name varchar(255),
# password char(64) NOT NULL,
# CONSTRAINT pk_users PRIMARY KEY (user_id)
#) WITHOUT OIDS;
# \q


Step 5: Add the JDBC driver file to Glassfish

If you have not yet setup a JDBC connection to PostgreSQL you have to add the right driver to Glassfish. Here are the steps:

1. Download the JDBC driver for your version of PostgreSQL at http://jdbc.postgresql.org/download.html. I am using “JDBC3 Postgresql Driver, Version 8.2-507” with filename “postgresql-8.2-507.jdbc3.jar” since JDBC4 does not support all methods yet (like giving relevant feedback to the client when throwing an exception).
2. Copy “postgresql-8.2-507.jdbc3.jar” to [GLASSFISH_DIR]/domains/domain1/lib.
3. Restart the domain using the program asadmin available in [GLASSFISH_DIR]/bin.

>./asadmin stop-domain
>./asadmin start-domain


Step 6: Set up a JDBC connection pool in Glassfish

The next step is to set up a connection pool which we’ll use from our application to connect to the database.

1.
Go to the Admin Console at http://localhost:4848/. If you’ve kept the default username/password combination log in as “admin” with password “adminadmin” (and change it).

2.
Click Create New JDBC Connection Pool on the homepage.

3.
Fill in for New JDBC Connection Pool (Step 1 of 2):

Name:	__PgTestDBPool
Resource type	javax.sql.DataSource
Database Vendor	PostgreSQL

4.
Fill in for New JDBC Connection Pool (Step 2 of 2) at the bottom of the page, assuming you kept default settings when installing PostgreSQL:

User	postgres
DatabaseName	test_db
Password	xxxxxxxx
ServerName	localhost
PortNumber	5432

5.
You are now directed to (look at the crumbpath) Resources > JDBC > Connection Pools. Click on your newly created JDNI entry __PgTestDBPool and click the Ping button at the top. A message should pop up saying Ping Succeeded.

6.
Now create a JDCB Resource by clicking Resources > JDBC > JDBC Resources in the left treeview pane

7.
On the JDBC Resources page click the New button and fill in:

JDNI Name	jdbc/test_db
Pool Name	__PgTestDBPool

Step 7: Create the User Entity Bean

In the next two steps we develop the backend application to define and expose our domain model. In this step we create the entity bean User which maps to the table we created in Step 4.

1. In NetBeanse IDE right-click on JumpStartEjbJsf-ejb and select New > Entity Classes from Database…
2. In the New Entity Classes From Database dialog box select Data Source: jdbc/test_db.
3. In the New Database Connection that then pops up it should read the values from the table below…
4. Click OK.
5. On the next tab Advanced select Schema public.
6. Back in the New Entity Classes From Database dialog box add the Users table to Selected Tables.
7. Click Next.
8. Change the class name from Users to User
9. Fill in the package name lux.domain.
10. Click the Create Persistence Unit button and accept the defaults.
11. Uncheck Generate Named Query Annotations for Persistent Fields.
12. Click Finish.

Name	“PostgreSQL”
Driver	“org.postgresql.Driver”
Database URL	jdbc:postgresql://localhost:5432/test_db
Username	postgres
Password	xxxxxxxx

The only thing we change to the Entity Bean is to tell JPA to have the DB automatically generate ID’s for us. There might be better ways (if you’re interested post me a comment…) for doing this because now we are tied to PostgreSQL but hey. Another note up ahead is that the sequenceName is users_user_id_seq because this is the name of the sequence PostgreSQL generated for the serial datatype we used in our table definition in Step 4.

1. Open the Entity Bean by clicking in the Projects pane: JumpStartEjbJsf-ejb > Source Packages > lux.domain > User.java.
2. Change the code by adding the two lines below the comment:

@Entity
@Table(name = "Users")
public class User implements Serializable {
private static final long serialVersionUID = 1L;
@Id
// Add these two lines to the generated code
@GeneratedValue(strategy=GenerationType.SEQUENCE, generator="users_seq_generator")
@SequenceGenerator(name="users_seq_generator", sequenceName="users_user_id_seq")</strong>
@Column(name = "user_id", nullable = false)
private Integer id;

Import the necessary classes (one way is too put your cursor on the erronous reference, clicking Alt-Shift-I and select the class to import). These classes are referenced:

import java.io.Serializable;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.NamedQueries;
import javax.persistence.SequenceGenerator;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

Step 8: Add business logic

In this step we create a Stateless Session Bean as a facade to our domain object allowing us to get, create, delete or update objects. Just as the standard DAO pattern states.

1. Create a Session Bean by right-clicking on “JumpStartEjbJsf-ejb” and selecting “New” > “Session Bean”
2. In the “New Session Bean” dialog box: fill in

EJB Name	UserDAO
Package	lux.facade
Session type	Stateless (default)
Create Interface	Local (default)

You might consider providing both a Local (inside the JVM) and a Remote (for connecting to the component over the network) interface. But for this project it’s just Local. Therefore let’s change the name of the class from UserDAOLocal.java to UserDAO.java.

1. In the Projects pane select JumpStartEjbJsf-ejb > Source Packages > lux.facade > UserDAOLocal.java and change the file name to UserDAO.java.
2. Click Refactor.

Finally. Some code. If UserDAOBean.java is not open yet then open it. Change the existing code by the code below. If you want to know more about what is going on try the very good introductory book try Java EE 5 Development using GlassFish Application Server.

package lux.facade;

import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.Query;
import lux.domain.User;

@Stateless
public class UserDAOBean implements UserDAO {

  @PersistenceContext
  private EntityManager em;

  public User getUser(int UserId) {
    User u = new User();
    u = em.find(User.class, UserId);
    return u;
  }

  public List<User> getAllUsers() {
    Query q = em.createQuery("SELECT u FROM User u");
    List<User> users = q.getResultList();
    return users;
  }

  public void createUser(User u) {
    String hashedPw = hashPassword(u.getPassword());
    u.setPassword(hashedPw);
    em.persist(u);
  }

  public void updateUser(User u) {
    String hashedPw = hashPassword(u.getPassword());
    u.setPassword(hashedPw);
    em.merge(u);
  }

  public void deleteUser(User u) {
    em.remove(u);
  }

  private String hashPassword(String password) {
    StringBuilder sb = new StringBuilder();
    try {
      MessageDigest messageDigest = MessageDigest.getInstance("SHA");
      byte[] bs;
      bs = messageDigest.digest(password.getBytes());
      for (int i = 0; i < bs.length; i++) {
        String hexVal = Integer.toHexString(0xFF & bs&#91;i&#93;);
        if (hexVal.length() == 1) {
          sb.append("0");
        }
        sb.append(hexVal);
      }
    } catch (NoSuchAlgorithmException ex) {
      Logger.getLogger(UserDAOBean.class.getName()).log(Level.SEVERE, null, ex);
    }
    return sb.toString();
  }
}&#91;/sourcecode&#93;
NetBeans will suggest you to update the Interface for each public method you add:<a href="https://luxlog.files.wordpress.com/2007/12/950.png" title="950.png"><img src="https://luxlog.files.wordpress.com/2007/12/950.thumbnail.png" alt="950.png" /></a>Here is the final source for the Interface.

package lux.facade;
import javax.ejb.Local;
@Local
public interface UserDAO {
  public lux.domain.User getUser(int UserId);
  public void createUser(lux.domain.User u);
  public void updateUser(lux.domain.User u);
  public void deleteUser(lux.domain.User u);
  public java.util.List<lux.domain.User> getAllUsers();
}

Feel like you’ve been doing lots of stuff? Well you have. You’ve got your application server running, made it possible to connect through it to a database, deployed an enterprise app running JSF, created a domain object and provided an interface to get and modify it.To the frontend now where we’ll create a list of users and a form to add a user to the database.

Step 9: Create the web application’s Controller

Next we create the controller class that will reference session facade created in Step 7.

1.
Create a controller (or “backing bean”) by right clicking JumpStartEjbJsf-war, selecting New > JSF Managed Bean. In the New JSF Managed Bean dialog box, fill in:

Class name	UserController
Package	lux.controllers
Scope	session

2.
Change the code for UserController.java to:

package lux.controllers;

import javax.ejb.EJB;
import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;
import lux.domain.User;
import lux.facade.UserDAO;

public class UserController {
  @EJB UserDAO userDao;
  private User user;
  private DataModel model;

  public String createUser() {
    this.user = new User();
    return “create_new_user”;
  }

  public String saveUser() {
    String r = “success”;
    try {
      userDao.createUser(user);
    } catch (Exception e) {
      e.printStackTrace();
      r = “failed”;
    }
    return r;
  }

  public DataModel getUsers() {
    model = new ListDataModel(userDao.getAllUsers());
    return model;
  }

  public User getUser() {
    return user;
  }

  public void setUser(User user) {
    this.user = user;
  }
}

The saveUser method above is the action that will be invoked when the user submits the form. Notice that saveUser returns either success or failed. This will decide to what page the user is forwarded as will be defined in faces-config.xml next.

Step 10: Configure page flow in faces-config.xml

1. Create the JSP file adduser.jsp by right-clicking JumpStartEjbJsf-war and selecting New > JSP. Fill in File Name adduser.jsp, click Finish.
2. Repeat the previous step for another JSP file failed.jsp.
3. On failed.jsp change the string <h2>Hello world</h2> to <h2>Save failed</h2>.

Next we configure the page flow.

1. Open JumpStartEjbJsf-war > Configuration Files > faces-config.xml.
2. Drag an arrow from index.jsf to adduser.jsp and replace the arrow’s label to create_new_user.
3. Repeat the previous step for failed, by dragging and arrow from adduser.jsp to failed.jsp renaming the label to failed
4. Finally repeat the step for adduser.jsp, by dragging from adduser.jsp to index.jsp renaming the label to success. This results in the image depicted below:

You’re faces-config should now look like this (click the “XML” button)

<?xml version='1.0' encoding='UTF-8'?>

<faces-config version="1.2"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <managed-bean>
        <managed-bean-name>user</managed-bean-name>
        <managed-bean-class>lux.controllers.UserController</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <navigation-rule>
        <from-view-id>/index.jsp</from-view-id>
        <navigation-case>
            <from-outcome>create_new_user</from-outcome>
            <to-view-id>/adduser.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/adduser.jsp</from-view-id>
        <navigation-case>
            <from-outcome>failed</from-outcome>
            <to-view-id>/failed.jsp</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>success</from-outcome>
            <to-view-id>/index.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

Last steps are writing the view elements (or “forms”).

Step 11: Create views

Open JumpStartEjbJsf-war > Web Pages > index.jsp and change the existing code by

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>User Listing</title>
    </head>
    <body>
        <f:view>
            <h:form>
                <h1><h:outputText value="User Listing"/></h1>
                <p><h:commandLink action="#{user.createUser}" value="Create a user"/></p>
                <h:dataTable value="#{user.users}"
                             var="dataTableItem" border="1" cellpadding="2" cellspacing="2">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText  value="Username"/>
                        </f:facet>
                        <h:outputText value="#{dataTableItem.username}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText  value="First name"/>
                        </f:facet>
                        <h:outputText value="#{dataTableItem.firstName}" />
                    </h:column>
                    <h:column>
                        <f:facet name="header">
                            <h:outputText  value="Last name"/>
                        </f:facet>
                        <h:outputText value="#{dataTableItem.lastName}" />
                    </h:column>
                </h:dataTable>
            </h:form>
        </f:view>
    </body>
</html>

Open JumpStartEjbJsf-war > Web Pages > adduser.jsp and change the existing code by

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>New user</title>
    </head>
    <body>
        <f:view>
            <h:form>
                <h:messages/>
                <h:panelGrid columns="2">
                    <h:outputText value="Username"/>
                    <h:inputText
                        label="Username"
                        value="#{user.user.username}"
                        required="true"/>
                    <h:outputText value="First name"/>
                    <h:inputText
                        label="First name"
                        value="#{user.user.firstName}" />
                    <h:outputText value="Last name"/>
                    <h:inputText
                        label="Last name"
                        value="#{user.user.lastName}" />
                    <h:outputText value="Password" />
                    <h:inputSecret
                        label="Password"
                        value="#{user.user.password}"
                        required="true" />
                    <h:panelGroup/>
                    <h:commandButton
                        action="#{user.saveUser}"
                        value="Save"/>
                </h:panelGrid>
            </h:form>
        </f:view>
    </body>
</html>

Let’s run our application by clicking F6 (Run). If it doesn’t work right away because try “Undeploy and deploy”-ing it. I had to each time I walked through the above code for testing. You can do this by right-clicking the project name JumpStartEjbJsf and selecting Undeploy Deploy.Haven’t had enough already? Then there is Part 2: Basic web app extended to full CRUD

Hope it worked for you. Feel free to comment. What improvements can you think of? What should be the next move (integrate with SAAJ and make a login page)? Did you run into trouble? Let us know.